<template>
	<div class="my-order-item">
		<div class="my-order-left">
			<div class="my-bg-img">
				<img src="https://forum.alexs.fun/categories/bed.png" alt="bed">
			</div>
		</div>
		<div class="my-order-right">
			<div class="my-order-row-1 my-row">欧洲新风尚皇室贵族台柜</div>
			<div class="my-order-row-2 my-row">
				<span class="my-gg">规格：256cm × 256cm</span>
				<div class="my-gg-desc">常规套</div>
			</div>
			<div class="my-order-row-3 my-row">￥4399</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "MyOrderItem"
}
</script>

<style scoped>

	.my-bg-img {
		background-color: #F6F6F6;
		border-radius: 15px;
		height: 80px;
		width: 80px;
		margin: 10px 10px 10px 25px;
		overflow: hidden;
	}
	.my-bg-img > img{
		width: 100%;
		height: 100%;
	}
	.my-order-item {
		width: 100%;
		margin: 0;
		padding: 0;
		background-color: white;
		color: black;
		height: 100px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.my-order-right {
		display: flex;
		flex-direction: column;
		height: 80px;
		margin: 10px 5px;
		text-align: left;
		width: inherit;
		padding-right: 15px;
	}
	.my-row {
		display: flex;
		justify-content: space-between;
	}
	.my-order-row-1{
		font-size: 15px;
		margin-bottom: 6px;
	}
	.my-order-row-2{
		margin-bottom: 6px;
		font-size: 12px;
	}
	.my-gg{
		color: #BBBABD;
	}
	.my-order-row-3{
		font-size: 18px;
		font-weight: 700;
	}

</style>